<template>
  <div class="home">
    <HomeHeader></HomeHeader>
    <HomeSwiper :SwiperList="SwiperList"></HomeSwiper>
    <homeIcons :iconsList="iconsList"></homeIcons>
    <location></location>
    <Activity></Activity>
    <Hot :hotList="hotList"></Hot>
    <like :likeList="likeList"></like>
    <Vacation :vacationList="vacationList"></Vacation>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HomeHeader from "./pages/Header.vue";
import HomeSwiper from "./pages/Swiper.vue";
import homeIcons from "./pages/lcons.vue";
import Location from "./pages/Location.vue";
import Activity from "./pages/Activity.vue";
import Hot from "./pages/hot.vue";
import Like from "./pages/Like.vue";
import Vacation from "./pages/Vacation.vue";

export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeSwiper,
    homeIcons,
    Location,
    Activity,
    Hot,
    Like,
    Vacation,
  },
  data() {
    return {
      SwiperList: [],
      iconsList: [],
      hotList: [],
      likeList: [],
      vacationList: [],
      changeCity:""
    };
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHttp(){
      this.$http.get("/api/dataHome.json").then((res) => {
        const data = res.data.data;
        data.forEach((item,index)=>{
            if(item.city==this.city){
             this.SwiperList = item.SwiperList;
            this.iconsList = item.iconsList;
            this.hotList = item.hotList;
            this.likeList = item.likeList;
            this.vacationList = item.vacationList;
            }
        })

      });
    }
  },
  mounted() {
    this.changeCity=this.city
    this.getHttp()
    
  },
  activated(){
    // console.log(this.city,this.changeCity)
   if(this.city != this.changeCity){
     this.getHttp();
     this.changeCity=this.city
   }
  }
};
</script>

<style scoped>
.home {
  background-color: #f5f5f5;
}
</style>>
